﻿<!doctype html>
<html>
<head><meta charset="utf-8" /></head>
<title>canvas test</title>

<body>
<canvas id = "canvas2D", width = "1600", height = "900" ></canvas>

<script>

var canvasElement = document.getElementById('canvas2D');
var g2D = canvasElement.getContext("2d");
//if(!g2D) return;

g2D.shadowOffsetX = 15;
g2D.shadowOffsetY = 15;
g2D.shadowBlur    = 34;
g2D.shadowColor   = 'rgba(0, 0, 0, 0.1)';

// draw background color
g2D.fillStyle = '#ccf';
g2D.fillRect(0, 0, canvasElement.width,canvasElement.height);


// draw a blue rectangle
// Arguments: x, y, width, height
g2D.fillStyle = '#00f';
g2D.fillRect(10, 10, 200, 200);


// draw a rectangle stroke
g2D.strokeStyle = '#ff0';
var w = g2D.lineWidth = 1;
var sw = w*3/2;
var cw = w*3;
g2D.strokeRect(10+sw, 10+sw, 200-sw*2, 200-sw*2);

g2D.clearRect(10+cw, 10+cw, 200-2*cw, 200-2*cw);

// path
g2D.strokeStyle = '#f00';
g2D.strokeRect(220.5, 10.5, 200, 200);

g2D.beginPath();
g2D.moveTo(440, 10);
g2D.lineTo(440, 210);
g2D.lineTo(640, 210);
g2D.lineTo(540, 10);
g2D.lineTo(440, 10);
g2D.fill();
g2D.closePath();

//-----------------------------------------------------
g2D.lineWidth = 1;

g2D.beginPath();
g2D.moveTo(680.5, 10.5);
g2D.lineTo(680.5, 210.5);
g2D.lineTo(880.5, 210.5);
g2D.lineTo(780.5, 10.5);
g2D.lineTo(680.5, 10.5);
g2D.stroke();
g2D.closePath();


g2D.strokeStyle = "#22f";

// Draw a Bèzier curve.
g2D.beginPath();
// Arguments: cp1x, cp1y, cp2x, cp2y, x, y
// cp = control point.
g2D.moveTo(900, 10);
g2D.bezierCurveTo(1000, 500, 1110, -210, 1200, 210);
g2D.stroke();
g2D.closePath();

// Draw a circle using the arc function.
g2D.beginPath();
// Arguments: x, y, radius, start angle, end angle, anticlockwise
g2D.arc(1410, 110, 100, 0, 360, false);
g2D.stroke();
g2D.closePath();

// Create a new image.
var img = new Image();

// Once it's loaded draw the image on the canvas.
img.addEventListener('load', function ()
{
	// Original resolution: x, y.
	g2D.drawImage(this, 60, 260);

	// Now resize the image: x, y, w, h.
	g2D.drawImage(this, 10, 220, 40, 40);

	// Crop and resize the image: sx, sy, sw, sh, dx, dy, dw, dh.
	g2D.drawImage(this, 0, 220, 240, 40, 800, 220, 640, 240);


	//-------------------------------------------------------------------------
	var imgd = false;
	var w = 640, h = 20;

	// Not all browsers implement createImageData. On such browsers we obtain the
	// ImageData object using the getImageData method. The worst-case scenario is
	// to create an object *similar* to the ImageData object and hope for the best
	// luck.
	if (g2D.createImageData)
	{
		imgd = g2D.createImageData(w, h);
	}
	else if (g2D.getImageData)
	{
		imgd = g2D.getImageData(0, 0, w, h);
	}
	else
	{
		imgd = {'width' : w, 'height' : h, 'data' : new Array(w*h*4)};
	}

	var pix = imgd.data;

	// Loop over each pixel.
	for (var i = 0, n = pix.length; i < n; i += 4)
	{
		var y = i/w*4;
		pix[i  ] = y; // the red channel
		pix[i+1] = y; // the green channel
		pix[i+3] = 127; // the alpha channel
	}

	// Draw the ImageData object.
	g2D.putImageData(imgd, 800, 480);


	//-------------------------------------------------------------------------
	// Get the pixels.
	imgd = g2D.getImageData(800, 220, 640, 240);
	var pix = imgd.data;

	// Loop over each pixel and invert the color.
	for (var i = 0, n = pix.length; i < n; i += 4)
	{
		pix[i  ] = 255 - pix[i  ]; // red
		pix[i+1] = 255 - pix[i+1]; // green
		pix[i+2] = 255 - pix[i+2]; // blue
		// i+3 is alpha (the fourth element)
	}

	// Draw the ImageData object.
	g2D.putImageData(imgd, 800, 530);

}, false);

img.src = 'test.jpg';


//-------------------------------------------------------------------------
// Now let's draw a rectangle with a black shadow.
// Shadows only render in Konqueror 4.1 and Firefox 3.1 nightlies.
g2D.shadowOffsetX = 5;
g2D.shadowOffsetY = 5;
g2D.shadowBlur    = 5;
g2D.shadowColor   = 'rgba(20, 20, 0, 0.3)';

// The hue spectrum used by HSV color picker charts.
var color, hue = [
[255,   0,   0 ], // 0, Red,       0°
[255, 255,   0 ], // 1, Yellow,   60°
[  0, 255,   0 ], // 2, Green,   120°
[  0, 255, 255 ], // 3, Cyan,    180°
[  0,   0, 255 ], // 4, Blue,    240°
[255,   0, 255 ], // 5, Magenta, 300°
[255,   0,   0]], // 6, Red,     360°

// Create the linear gradient: sx, sy, dx, dy.
// That's the start (x,y) coordinates, followed by the destination (x,y).
gradient = g2D.createLinearGradient(0, 0, 512, 0);

// Add the color stops.
for (var i = 0; i <= 6; i++)
{
	color = 'rgb(' + hue[i][0] + ', ' + hue[i][1] + ', ' + hue[i][2] + ')';
	gradient.addColorStop(i * 1/6, color);
}

// Use the gradient for the fillStyle.
g2D.fillStyle = gradient;

// Let's draw "Hello world!" in blue.
//g2D.fillStyle    = '#f00';
 g2D.fillRect(0, 800, 512, 10);

// The font property is like the CSS font property.
g2D.font         = 'normal 30px sans-serif';
g2D.textBaseline = 'top';

if (g2D.fillText)
{
	g2D.fillText('文章本天成,妙手偶得之', 100, 220);
}

// It looks like WebKit doesn't support the strokeText method.
// Tested on Ubuntu 8.10 Linux in WebKitGTK revision 38095 (2008-11-04, svn
// trunk build).
g2D.font = 'bold 30px sans-serif';
if (g2D.strokeText)
{
	g2D.strokeText('道法自然', 500, 220);
}


</script>
</body>
</html>